<template>
  <view class="uploading-box" :style="{ height: viewHeight }">
    <uni-list style="padding-bottom: 50rpx">
      <uni-list-item title="企业名称">
        <template v-slot:footer>
          <view class="">
            {{ enterpriseName }}
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="所在岗位">
        <template v-slot:footer>
          <input
            style="text-align: right"
            class="uni-input"
            placeholder="请输入你的岗位"
            v-model="job"
          />
        </template>
      </uni-list-item>
      <uni-list-item title="联系方式">
        <template v-slot:footer>
          <input
            style="text-align: right"
            class="uni-input"
            @blur="checkPhone"
            placeholder="请输入你的联系方式"
            v-model="phone"
          />
        </template>
      </uni-list-item>
      <uni-list-item title="上传营业执照"> </uni-list-item>
      <uni-file-picker
        style-other="margin-left: 30rpx;margin-bottom: 30rpx;width: 96vw;"
        file-mediatype="image"
        limit="9"
        title=""
        @select="uploadFile"
      />
      <uni-list-item title="上传公司授权书"> </uni-list-item>
      <uni-file-picker
        style-other="margin-left: 30rpx;margin-bottom: 30rpx;width: 96vw;"
        file-mediatype="image"
        limit="9"
        title=""
        @select="uploadFileBusiness"
      />
      <view class="download-fie" @click="downloadFile">
        下载《公司授权书》模板
      </view>
    </uni-list>
    <view class="notice">
      <view
        >1、《公司授权书》填写完成后拍照上传。注意授权书填写完整，拍摄清晰，使用手写签名和实体公章
      </view>
      <view>2、支持jpg、jpeg、png格式，大小不超过2M</view>
      <view
        >3、上传图片须为清晰完整的彩色实物照片或高清彩色扫描件，同时露出图片的四个角</view
      >
      <view>4、如未通过审核，请仔细阅读通知，并依据内容进行修改</view>
    </view>
    <view class="comment-box">
      <view class="go-comment" @click="getNewComment">提交审核</view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, nextTick } from "vue";
import { getUrlParamsInWeixin, getTitleViewHeight } from "@/utils/utils";
import { applyManagerCheck } from "@/api/user/index.js";
import UniFilePicker from "@/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue";
const enterpriseName = ref("");
const enterpriseId = ref();
const honorDescribe = ref("");
const userName = ref("");
const viewHeight = ref("");
// 公司授权书
const authorization = ref("");
// 企业或集体id
const enterpriseCollectiveId = ref("");
// 岗位
const job = ref("");
// 联系方式
const phone = ref("");
// 营业执照
const businessLicense = ref("");

const checkPhone = () => {
  if (!phone.value) return;
  // 手机号格式校验正则表达式
  const regExp = /^1[3456789]\d{9}$/;

  if (regExp.test(phone.value)) {
    return true; // 手机号有效
  } else {
    uni.showToast({
      title: "联系方式格式有误",
      icon: "error",
      // duration: 5000,
    });
    return false; // 手机号无效
  }
};
// 营业执照上传
const uploadFile = async (res) => {
  console.log(res);
  const { tempFilePaths } = res || {};
  const tempFile = tempFilePaths[0];
  uni.uploadFile({
    url: "/ht-user/user/upload",
    filePath: tempFile,
    name: "file",
    formData: {
      type: 2,
    },
    success: (res) => {
      const { statusCode, data } = res;
      if (statusCode === 200) {
        const parseData = JSON.parse(data);
        if (authorization.value === "") {
          authorization.value = parseData.data;
        } else {
          authorization.value += `ht:url${parseData.data}`;
        }
      }
    },
  });
};

// 授权书上传
const uploadFileBusiness = async (res) => {
  const { tempFilePaths } = res || {};
  console.log(tempFilePaths);
  const tempFile = tempFilePaths[0];
  uni.uploadFile({
    url: "/ht-user/user/upload",
    filePath: tempFile,
    name: "file",
    formData: {
      type: 2,
    },
    success: (res) => {
      const { statusCode, data } = res;
      if (statusCode === 200) {
        const parseData = JSON.parse(data);
        if (businessLicense.value === "") {
          businessLicense.value = parseData.data;
        } else {
          businessLicense.value += `ht:url${parseData.data}`;
        }
      }
    },
  });
};

const getNewComment = async () => {
  if (job.value == "") {
    uni.showToast({
      title: "请输入岗位",
      icon: "none",
    });
  } else if (phone.value == "") {
    uni.showToast({
      title: "请输入联系方式",
      icon: "none",
    });
  } else if (authorization.value == "") {
    uni.showToast({
      title: "请上传公司授权书",
      icon: "none",
    });
  } else if (businessLicense.value == "") {
    uni.showToast({
      title: "请上传营业执照",
      icon: "none",
    });
  } else {
    let params = {
      authorization: businessLicense.value,
      type: 0,
      businessLicense: businessLicense.value,
      enterpriseCollectiveId: enterpriseId.value,
      job: job.value,
      phone: phone.value,
    };
    let res = await applyManagerCheck(params);
    if (res.code === 200) {
      await uni.showToast({
        title: "申请成功",
        icon: "success",
      });
      setTimeout(async () => {
        await uni.navigateBack();
      }, 2000);
    }
  }
};

// 下载《公司授权书》模板
const downloadFile = () => {
  uni.showLoading({
    title: "下载中",
  });
  uni.downloadFile({
    url: "https://minio.gzryzl.com/huatai/2024-03-08/1709874337629授权委托书.docx",
    success: (res) => {
      console.log(res);
      const savedFilePath = res.tempFilePath;
      // 打开文件
      uni.openDocument({
        filePath: savedFilePath,
        success: function (res) {
          uni.hideLoading();
        },
        fail: function (res) {},
        complete: function (res) {
          setTimeout(uni.hideLoading(), 2000);
        },
      });
    },
    fail: (err) => {
      console.log("downloadFile fail, err is:", err);
      uni.hideLoading();
    },
  });
};

onLoad((option) => {
  nextTick(() => {
    viewHeight.value = `calc(100vh - ${getTitleViewHeight() + 40}rpx)`;
  });
  console.log(getUrlParamsInWeixin());
  enterpriseName.value = option.enterpriseName;
  enterpriseId.value = option.id;
  console.log(enterpriseId.value);
});
</script>

<style lang="less" scoped>
.uploading-box {
  width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  .download-fie {
    height: 34rpx;
    font-family: "ali";
    font-weight: 400;
    font-size: 30rpx;
    color: #5590f6;
    margin-left: 16rpx;
    line-height: 20rpx;
  }
  .notice {
    font-family: "ali";
    font-weight: 400;
    font-size: 30rpx;
    color: #9b9b9b;
    line-height: 40rpx;
    padding: 50rpx 43rpx 78rpx 60rpx;
  }
  .comment-box {
    width: 100vw;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    .go-comment {
      background-image: linear-gradient(to right, #ff934c, #fc686f);
      width: 90vw;
      height: 70rpx;
      border-radius: 50rpx;
      text-align: center;
      line-height: 70rpx;
      color: #ffffff;
      font-size: "ali-m";
      font-size: 32rpx;
    }
  }
}
</style>
